<!-- 充值申请 -->
<template>
<view>
	<HeaderBar :currentName="currentName" ></HeaderBar>
	<!--  <img src="https://s2023.oss-cn-qingdao.aliyuncs.com/resource/images/dark/plugbg.png" style="width: 100%;" alt="">-->
	<!--  <view>-->
	<!--    <view style="font-size: 12px;color: #fff;position: absolute;top: 9%;width: 50%;padding:  2% 0 0 2%">-->
	<!--      99U升级成为经纪人 <br>-->
	<!--      <br>-->
	<!--      经纪人的福利<br>-->
	<!--      <br>-->
	<!--      1.成为经纪人赠送一块高档品牌手表。<br>-->
	<!--      <br>-->
	<!--      2.成为经纪人可以享受自己直推交易手续费收益的40%（实际会员也享受此标准）<br>-->
	<!--      <br>-->
	<!--      3.成为经纪人可以优先参与平台打新等活动<br>-->
	<!--      <br>-->
	<!--      4.成为经纪人赠送100枚平台币每天按0.3个释放，需满足条件（每天自己或者直推至少买入、卖出各一次）才会释放。<br>-->
	<!--      <br>-->
	<!--      5.成为经纪人可以享受平台新币空投-->
	<!--    </view>-->
	<!--  </view>-->
	  <!-- 申请信息 -->
	  <view class="applyMes">
	
	    <template
	        v-if="
	        !['coinsexpto', 'rxce', 'gmtoin', 'aams', 'bitbyex', 'gmmoin'].includes(
	          _getConfig('_APP_ENV')
	        )
	      "
	    >
	      <view class="num">
	        <p class="top">{{ _t18('advanced_name', ['bitmake']) }}</p>
	        <view class="bottom">
	          <input  :placeholder="_t18('recharge_input')" class="ff-num" v-model="name" />
	        </view>
	      </view>
	      <view class="num">
	        <p class="top">{{ _t18('login_mobileCode', ['bitmake']) }}</p>
	        <view class="bottom">
	          <input type="number" :placeholder="_t18('recharge_input')" class="ff-num" v-model="phone" />
	        </view>
	      </view>
	      <!--      <view class="num">
	              &lt;!&ndash; 充值数量 &ndash;&gt;
	              <p class="top">{{ _t18('login_mobileCode', ['bitmake']) }}</p>
	              <view class="bottom">
	                <van-popup v-model:show="showAddress" position="bottom">
	                  <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showAddress = false" />
	                </van-popup>
	
	              </view>
	            </view>-->
	
	      <view class="num">
	        <p class="top">{{ _t18('defi_host_address1', ['bitmake']) }}</p>
	        <view class="bottom">
	          <input :placeholder="_t18('recharge_input')" class="ff-num" v-model="address" />
	        </view>
	      </view>
	      <view class="num">
	        <p class="top">款式</p>
	        <view
	            class="rightScond"
	        >
	          <van-popover v-model:show="showPopover" :show-arrow="false">
	            <view class="rightScondList">
	              <view
	                  class="rightScondListItem"
	                  v-for="item in delegateTypeList"
	                  :key="item.value"
	                  :class="{
	                  hightBlue: form.delegateType == item.value
	                }"
	                  @click="checkedDelegateType(item)"
	              >
	                {{ item.label }}
	              </view>
	            </view>
	            <template #reference>
	              <view class="entrustSelect">
	                <view>{{ currentDelegateType.label }}</view>
	                <svg-load  :name="showPopover?'jiantou10x5-s':'jiantou10x5-x'" class="img"></svg-load>
	              </view>
	            </template>
	          </van-popover>
	        </view>
	      </view>
	
	    </template>
	  </view>
	
	  <!-- 确认充值 -->
	
	  <view class="btn" @click="submit">
	    <p> 修改信息</p>
	  </view>
	
	  <Dialog
	      v-model:value="showDialog"
	      :title="``"
	      :content="_t18('jingjiren1')"
	      confirm-button-color="#17ac74"
	      @cancelBtn="cancelBtn"
	      @confirmBtn="confirmBtn(data)"
	      :confirmButtonText="_t18('btnConfirm', ['bitmake'])"
	      :cancelButtonText="_t18('cancel')"
	      z-index="200"
	  ></Dialog>
</view>
</template>

<script setup>

import { uploadImg } from '@/api/common/index.js'
import { rechargeSubmit, getUserRechageNewApi } from '@/api/account.js'
import { _toView, _hideAddress, _t18, _getConfig } from '@/utils/public'
import { priceFormat } from '@/utils/decimal'
import QRCode from '@/components/common/QRCode/index.vue'
import Copy from '@/components/common/Copy/index.vue'
import { showToast } from 'vant'
import { debounce } from 'lodash'
import { useToast } from '@/hook/useToast'
import { useCopy } from '@/hook/useCopy'
import { useRouter, useRoute } from 'vue-router'
import { useMainStore } from '@/store'
import { onMounted, reactive } from 'vue'
import { ref } from 'vue';
import {getToBuyInfot, receiveLoglist, receiveLogupdate, submitForBuyBroker} from "@/api/defi";
import Dialog from "@/components/Dialog/index.vue";
const { _toast } = useToast()
const { _copy } = useCopy()
const route = useRoute()
const router = useRouter()
// 充值
const currentName = `${_t18('trade_tab6', ['latcoin'])} `
const cuttentRight = { iconRight: [{ iconName: 'jilu', clickTo: '/recharge-order' }] }
/**
 * 充值说明
 */
const tipList = reactive([
  { content: _t18('recharge_tip1') },
  { content: _t18('recharge_tip2') },
  { content: _t18('recharge_tip3')  },
  { content: _t18('recharge_tip4') }
])
const tipList2 = reactive([{ content: _t18('recharge_tip5') }])



const currentDelegateType = ref({ label: '男款', placeholder: '', value: '1' })
const showPopover = ref(false)
const form = reactive({
  type: '0',
  delegateType: null
})
const delegateTypeList = [
  { label: '男款', placeholder: '', value: '1' },
  { label: '女款', placeholder: '', value: '0' }
]


const checkedDelegateType = (item) => {
  sex.value= item.label
  currentDelegateType.value = item
  showPopover.value = false
}





const fileList = ref([])

const afterRead = (file) => {
  file.status = 'uploading'
  // 此时可以自行将文件上传至服务器
  let formData = new FormData()
  formData.append('file', file.file)
  uploadImg(formData).then((res) => {
    res = res.data
    if (res.code == '200') {
      file.res = res.data.url
      file.status = 'success'
    } else {
      showToast(res.msg)
      fileList.value = []
    }
  })
}
const num = ref('')
const name = ref('')
const phone = ref('')
const sex = ref('')
const address = ref('')
const Info = ref()
const BuyInfo = ref()
const showDialog = ref(false)
const cancelBtn = () => {
  showDialog.value = false
}


const confirmBtn = (data) => {
  showDialog.value = false
  submit()
}
const submit = debounce(() => {
  console.log(BuyInfo.value,'BuyInfoBuyInfo')
  let  params = {
    id:BuyInfo.value.id,
    name:name.value,
    phone:phone.value,
    address:address.value,
    sex:sex.value,
  }
  console.log(route.query.invite_code,'route.query.invite_code,')
  receiveLogupdate(params).then((res) => {
    if (res.code == '200') {
      showToast('修改成功')
      setTimeout(() => {
        _toView('/plug2')
      }, 500)
    } else {
      showToast(res.msg)
    }
  })
}, 500)

const mainStore = useMainStore()
/**
 * 充值地址
 */
// const address = computed(() => {
//
//   let rechargeObj = mainStore.getRechargeList.find((elem) => elem.coinName == route.query.type)
//   return rechargeObj.coinAddress
// })
const city = ref()
const broker = ref()
const namepd = ref()
const  receiveLog = (()=>{
  receiveLoglist({}).then((res) => {
    if(res.rows[0]){
      BuyInfo.value = res.rows[0]
      name.value = res.rows[0].name
      namepd.value = res.rows[0].name
      address.value = res.rows[0].address
      phone.value = res.rows[0].phone
      sex.value = res.rows[0].sex
      currentDelegateType.value.label = res.rows[0].sex
    }
  })
})
onMounted(() => {
  receiveLog()
})
</script>

<style lang="scss" scoped>
* {
  font-size: 14px;
  color: var(--ex-default-font-color);
}
.erweima {
  padding: 50px 0;
}
.rightScondList {
  width: 180px;
  background-color: var(--ex-default-background-color);
  padding: 5px 0;
  font-size: 12px;
  color: var(--ex-passive-font-color);
  .rightScondListItem {
    padding: 10px 0;
    text-align: center;
    // background: var(--ex-div-bgColor);
  }
}
.rightScond {
  margin-top: 10px;
  .entrustSelect {
    font-size: 12px;
    width: 180px;
    height: 33px;
    background: var(--ex-div-bgColor);
    border-radius: 2px 2px 2px 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--ex-default-font-color);
    .img {
      width: 10px;
      height: 5px;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.applyMes {
  border-top: 1px solid var(--ex-border-color);
  padding: 30px 15px;
  & > div {
    margin-bottom: 20px;

    p {
      color: var(--ex-passive-font-color);
      margin-bottom: 10px;
    }
  }
  .address {
    .bottom {
      word-break: break-all;
    }
  }
  .num {
    .bottom {
      border: 1px solid var(--ex-border-color1);
      padding: 15px 10px;
      border-radius: 3px;
      input {
        width: 100%;
      }
      input::placeholder {
        color: var(--ex-font-color5);
        font-size: 14px;
      }
    }
  }
  .uploadImg {
    .van-uploader {
      width: 100%;
      :deep(.van-uploader__input-wrapper) {
        width: 100%;
      }
    }
    .bottom {
      border: 1px solid var(--ex-border-color1);
      padding: 35px 0;
      text-align: center;
      border-radius: 3px;
      .img {
        font-size: 36px;
      }
    }
  }
}
.btn {
  padding: 0 15px 55px;
  p {
    text-align: center;
    padding: 14px 0;
    color: var(--ex-font-color);
    font-size: 16px;
    background-color: var(--ex-div-bgColor1);
    border-radius: 3px;
  }
}
.tip-list {
  padding: 0 15px;
  .tip {
    margin-bottom: 15px;
  }
}
</style>
